<template>
  <div class="app" :style="{height: '100%'}">
    <div class="main" :style="{height: '100%'}">
      <router-view></router-view>
    </div>
    <FooterNav :showNav="showNav"></FooterNav>
  </div>
</template>

<script>
import FooterNav from "../src/components/FooterNav";
export default {
  data() {
    return {
      showNav: true
    };
  },
  components: {
    FooterNav
  },
  watch: {
    '$route': function() {
      this.changeShow();
    }
  },
  methods: {
    changeShow() {
      let path = this.$route.path;
      if (path === "/home" || path === "/cinema" || path === "/me") {
        this.showNav = true;
      } else {
        this.showNav = false;
      }
    }
  },
  created(){
    this.changeShow()
  },
  mounted () {
    window.setTimeout(() => {
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
    }, 250)
  }
};
</script>

<style>
body {
  background: #f5f5f5;
}
</style>
